<template>
  <view class="container">
    <!-- 头部 -->
    <view class="page-header">
      <text class="header-title">消息中心</text>
      <text class="header-subtitle">查看您的最新通知</text>
    </view>

    <!-- 消息列表 -->
    <view class="message-list" v-if="messageList.length > 0">
      <view 
        class="message-card" 
        v-for="(message, index) in messageList" 
        :key="index"
        @click="readMessage(message, index)"
      >
        <!-- 消息图标 -->
        <view class="message-icon" :class="getIconClass(message.type)">
          <text class="icon-text">{{ getIconText(message.type) }}</text>
          <view class="unread-dot" v-if="!message.isRead"></view>
        </view>

        <!-- 消息内容 -->
        <view class="message-content">
          <view class="message-header">
            <text class="message-title">{{ message.title }}</text>
            <text class="message-time">{{ formatTime(message.createTime) }}</text>
          </view>
          <text class="message-desc">{{ message.content }}</text>
          
          <!-- 消息详情 -->
          <view class="message-detail" v-if="message.detail && (message.detail.subject || message.detail.salary)">
            <text class="detail-text" v-if="message.detail.subject">{{ message.detail.subject }}</text>
            <text class="detail-divider" v-if="message.detail.subject && message.detail.salary">·</text>
            <text class="detail-text price" v-if="message.detail.salary">{{ message.detail.salary }}</text>
          </view>
        </view>

        <!-- 操作箭头 -->
        <view class="message-arrow" v-if="message.actionText">
          <text class="arrow-icon">›</text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <view class="empty-icon">📭</view>
      <text class="empty-text">暂无消息</text>
      <text class="empty-hint">您的消息通知将显示在这里</text>
    </view>

    <!-- 底部提示 -->
    <view class="footer-tip" v-if="messageList.length > 0">
      <text class="tip-text">以上是最近30天的消息</text>
    </view>
  </view>
</template>

<script>
/**
 * 消息中心页面
 * 展示投递简历、应聘通知等消息
 */
export default {
  name: 'MessagePage',
  data() {
    return {
      messageList: [],
      unreadCount: 0
    }
  },
  onShow() {
    this.loadMessages();
  },
  methods: {
    /**
     * 加载消息列表
     */
    loadMessages() {
      uni.showLoading({
        title: '加载中...'
      });

      uni.request({
        url: '/static/data/messages.json',
        success: (res) => {
          if (res.statusCode === 200 && res.data) {
            this.messageList = res.data.list || [];
            this.updateUnreadCount();
          }
        },
        fail: (err) => {
          console.error('加载消息失败:', err);
          uni.showToast({
            title: '加载失败',
            icon: 'none'
          });
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },

    /**
     * 更新未读数量
     */
    updateUnreadCount() {
      this.unreadCount = this.messageList.filter(m => !m.isRead).length;
    },

    /**
     * 读取消息
     */
    readMessage(message, index) {
      // 标记为已读
      if (!message.isRead) {
        this.messageList[index].isRead = true;
        this.updateUnreadCount();
      }

      // 根据消息类型跳转
      if (message.link) {
        uni.navigateTo({
          url: message.link
        });
      } else if (message.type === 'delivery') {
        // 投递简历消息 - 跳转到学生详情
        uni.navigateTo({
          url: `/pages/jiajiao/student-detail?id=${message.relatedId}`
        });
      } else if (message.type === 'apply') {
        // 应聘消息 - 跳转到发布详情
        uni.navigateTo({
          url: `/pages/jiajiao/my-publish-detail?orderId=${message.relatedId}`
        });
      }
    },

    /**
     * 格式化时间
     */
    formatTime(timeStr) {
      if (!timeStr) return '';
      const date = new Date(timeStr);
      const now = new Date();
      const diff = now - date;
      
      // 小于1分钟
      if (diff < 60000) {
        return '刚刚';
      }
      // 小于1小时
      if (diff < 3600000) {
        return `${Math.floor(diff / 60000)}分钟前`;
      }
      // 小于1天
      if (diff < 86400000) {
        return `${Math.floor(diff / 3600000)}小时前`;
      }
      // 小于7天
      if (diff < 604800000) {
        return `${Math.floor(diff / 86400000)}天前`;
      }
      // 格式化为日期
      return `${date.getMonth() + 1}月${date.getDate()}日`;
    },

    /**
     * 获取图标样式类
     */
    getIconClass(type) {
      const classMap = {
        'delivery': 'icon-delivery',
        'apply': 'icon-apply',
        'match': 'icon-match',
        'system': 'icon-system'
      };
      return classMap[type] || 'icon-system';
    },

    /**
     * 获取图标文本
     */
    getIconText(type) {
      const iconMap = {
        'delivery': '📤',
        'apply': '📋',
        'match': '✓',
        'system': '📢'
      };
      return iconMap[type] || '📢';
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 20rpx;
}

/* 页面头部 */
.page-header {
  background: white;
  padding: 40rpx 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
  color: #333;
}

.header-subtitle {
  font-size: 24rpx;
  color: #999;
  display: block;
}

/* 消息列表 */
.message-list {
  padding: 16rpx 0;
  display: flex;
  flex-direction: column;
}

.message-card {
  background: white;
  padding: 24rpx 30rpx;
  display: flex;
  gap: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
  transition: all 0.2s ease;

  &:active {
    background: #fafafa;
  }
}

/* 未读圆点 */
.unread-dot {
  position: absolute;
  top: -4rpx;
  right: -4rpx;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #ff4444;
  border: 3rpx solid white;
  box-shadow: 0 2rpx 6rpx rgba(255, 68, 68, 0.4);
  z-index: 2;
}

/* 消息图标 */
.message-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.icon-delivery {
  background: #fffaf5;
}

.icon-apply {
  background: #f5faf5;
}

.icon-match {
  background: #f5faf5;
}

.icon-system {
  background: #fafafa;
}

.icon-text {
  font-size: 36rpx;
}

/* 消息内容 */
.message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16rpx;
  margin-bottom: 4rpx;
}

.message-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
  line-height: 1.3;
}

.message-time {
  font-size: 22rpx;
  color: #bbb;
  flex-shrink: 0;
  line-height: 1.3;
}

.message-desc {
  font-size: 26rpx;
  color: #999;
  line-height: 1.6;
}

/* 消息详情 */
.message-detail {
  margin-top: 8rpx;
  display: flex;
  align-items: center;
  gap: 12rpx;
  flex-wrap: wrap;
}

.detail-text {
  font-size: 24rpx;
  color: #666;

  &.price {
    color: #ff6b35;
    font-weight: 600;
  }
}

.detail-divider {
  font-size: 24rpx;
  color: #ddd;
}

/* 操作箭头 */
.message-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40rpx;
}

.arrow-icon {
  font-size: 40rpx;
  color: #ddd;
  line-height: 1;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 30rpx;
  text-align: center;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 32rpx;
  opacity: 0.3;
}

.empty-text {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.empty-hint {
  font-size: 26rpx;
  color: #999;
}

/* 底部提示 */
.footer-tip {
  padding: 40rpx 30rpx 20rpx;
  text-align: center;
}

.tip-text {
  font-size: 24rpx;
  color: #999;
}
</style>

